<template>
  <div>
    <div class="content">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
        <el-row>
          <el-col :span="18" :offset="1">
            <el-form-item label="上传人" prop="f2102">
              <el-input v-model="queryParams.f2102" placeholder="请输入上传人" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="版本号" prop="f2105">
              <el-input v-model="queryParams.f2105" placeholder="请输入文件名称" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="是否启用" prop="delFlag">
              <el-select v-model="queryParams.delFlag" clearable @keyup.enter.native="handleQuery" placeholder="请选择">
                <el-option label="是" :value="0"></el-option>
                <el-option label="否" :value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="审批状态" prop="f2108">
              <el-select v-model="queryParams.f2108" clearable @keyup.enter.native="handleQuery" placeholder="请选择">
                <el-option label="已通过" :value="0"></el-option>
                <el-option label="未通过" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-form-item id="query-button">
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleAdd">新增版本</el-button>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-table v-loading="loading" :data="T09List">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="上传人" align="center" prop="f2102" />
        <el-table-column label="版本号" align="center" prop="f2105" />
        <el-table-column label="是否启用" align="center" prop="delFlag">
          <template slot-scope="scope">
            <el-tag :type="scope.row.delFlag === '0' ? 'success' : 'danger'">{{ scope.row.delFlag === '0' ? '是' :
              '否'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createDate" width="180"/>
        <el-table-column label="审批状态" align="center" prop="f2108">
          <template slot-scope="scope">
            <el-tag :type="scope.row.f2108 === 0 ? 'success' : 'danger'">{{ scope.row.f2108 === 0 ? '已通过' :
              '未通过'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleApprove(scope.row)">审批</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="float: right;">
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getList" />
      </div>
      <!-- 客户首次添加知识库版本对话框 -->
      <el-dialog title="知识库版本新增" :visible.sync="knowledge_open" width="500px" @closed="handleDialogChange"
        append-to-body>
        <el-form ref="form" :model="knowledge_form" :rules="rules" label-width="120px">
          <el-form-item label="公司名称" prop="f2102">
            <el-select v-model="knowledge_form.f0301" @change="handleChange" placeholder="请选择" style="width: 100%;">
              <el-option v-for="item in userList" :key="item.value" :label="item.f0302" :value="item.f0301">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="APP_ID" prop="f2103">
            <el-input v-model="knowledge_form.f2103" placeholder="请输入APP_ID" />
          </el-form-item>
          <el-form-item label="APP_SECRET" prop="f2104">
            <el-input v-model="knowledge_form.f2104" placeholder="请输入APP_SECRET" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitKnowledgeForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getApproveList, addFirstVersion } from "@/api/system/T21";
import { listT03 } from "@/api/t03/t03";
export default {
  name: 'ProcessApproval',
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        f0901: null,
        f0909: null,
        f0902: null,
        f0904: null,
        f0905: null,
        f2102: null,
        f2105: null,
        f2108: null,
        delFlag: null,
      },
      form: {
        title: '',
        category: '所有',
        businessSystem: '统一门户',
        publisher: ''
      },
      loading: true,
      T09List: [],
      total: 168,
      pageSize: 10,
      knowledge_open: false, // 知识库版本新增对话框
      knowledge_form: {
        f0301: null,
        f2102: null,
        f2103: null,
        f2104: null,
      },
      userList: [], // 用户列表
      rules: {
        f2102: [
          { required: true, message: '请选择公司名称', trigger: 'change' }
        ],
        f2103:[
          { required: true, message: '请输入APP_ID', trigger: 'blur' }
        ],
        f2104: [
          { required: true, message: '请输入APP_SECRET', trigger: 'blur' }
        ]
      }
    };
  },
  created() {
    listT03().then(res => {
      this.userList = res.rows;
    })
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      getApproveList(this.queryParams).then(res => {
        this.loading = false;
        this.T09List = res.rows;
        this.total = res.total;
      })
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.daterangeF0905 = [];
      this.resetqueryParams();
      this.handleQuery();
    },
    reset() {
      this.form = {
        title: '',
        category: '所有',
        businessSystem: '统一门户',
        publisher: ''
      };
      this.knowledge_form = {
        f0301: null,
        f2102: null,
        f2103: null,
        f2104: null,
      };
    },
    resetqueryParams() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        f0901: null,
        f0909: null,
        f0902: null,
        f0904: null,
        f0905: null,
        f2102: null,
        f2105: null,
        f2108: null,
        delFlag: null,
      }
    },
    handleApprove(row) {
      this.$router.push(`/ProcessApproval/detail/${row.f2107}`)
    },
    handleAdd() {
      this.knowledge_open = true;
    },
    submitKnowledgeForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          addFirstVersion(this.knowledge_form).then(res => {
            this.$message.success("新增成功");
            this.knowledge_open = false;
            this.reset()
          })
        }
      });
    },
    cancel() {
      this.knowledge_open = false;
      this.reset()
    },
    handleDialogChange() {
      this.reset();
    },
    handleChange(value) {
      this.knowledge_form.f2102 = this.userList.find(item => item.f0301 === value).f0302;
    }
  }
};

</script>

<style lang="scss" scoped>
.content {
  margin-top: 20px;
  padding-left: 20px;
  }
</style>
